@use './mixins.scss' as *;
// 富文本区域
// TODO 目前不能兼容左侧序号的宽度,后续还要兼容后台传回的代码片段;
//    将 ul,ol 的样式重置为默认
.rich-text-area {
    line-height: 1.5;
    @include font-normal();
    font-feature-settings: 'tnum' /*数字等宽*/;
    word-break: break-all;
    // overflow-x: auto;

    .marker {
      padding-left: 20px;
      text-indent: -20px;
    }
    .marker-1em {
      padding-left: 1em;
      text-indent: -1em;
    }
    .marker-2em {
      padding-left: 2em;
      text-indent: -2em;
    }
    .marker-disc {
      padding-left: 0.66666em;
      text-indent: -0.66666em;
    }
    .marker-1 {
      padding-left: 1em;
      text-indent: -0.9em;
    }
    .marker-double {
      padding-left: 1em;
      text-indent: -1.66666em;
    }
    .rich-text-area__table {
      span:first-child {
        display: inline-block;
        width: 100px;
      }
    }
    // 针对ck-editor的样式重置
    &.ck-content {
      .table {
        margin-left: unset;
        margin-right: unset;
      }
    }
    p,
    ul,
    table,
    li {
      margin-bottom: 12px;
    }
    li {
      ul,
      ol {
        margin-top: 12px;
      }
    }
    div,
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 1.5;
      word-wrap: break-word;
      word-break: break-word;
    }
    ol,
    ul {
      padding-left: 1.2em;
    }
    li {
      list-style: inherit;
    }
    b,
    strong {
      font-weight: normal;
      @include font-bold();
    }
    img,
    table,
    audio,
    video {
      max-width: 100%;
    }
    img {
      width: auto;
      height: auto;
      border-radius: 8px !important;
    }

    // 下面是表格元素的样式
    table,
    th,
    td {
      border: 1px solid var(--color-border-2);
    }
    table {
      width: 100%;
      text-align: center;
    }
    th,
    td {
      vertical-align: middle;
      padding: 2px;
    }
    th {
      font-weight: normal;
      @include font-bold();
    }
    pre {
      margin: 0.5em 0;
      overflow: auto;
      padding: 1em;
      white-space: pre;
      border: 1px solid var(--color-border-2);
      border-radius: 4px 4px;
      font-size: 14px;
    }
    .logo-in-table {
      display: block;
      margin: auto;
      height: 18px;
    }
}

.rich-text-area a:any-link {
  color: var(--color-primary);
}
